<template>
<div id="goods">
    <el-header>
        <ul>
            <li @click="cur_tab='all'" :class="{cur_tab:cur_tab=='all'}">全部</li>
            <li @click="cur_tab='Sale'" :class="{cur_tab:cur_tab=='Sale'}">售卖中</li>
            <li @click="cur_tab='check '" :class="{cur_tab:cur_tab=='check '}">审核中</li>
            <li @click="cur_tab='Lower'" :class="{cur_tab:cur_tab=='Lower'}">售完下架</li>
            <li @click="cur_tab='my_Lower'" :class="{cur_tab:cur_tab=='my_Lower'}">我下架的</li>
            <li @click="cur_tab='no_Lower'" :class="{cur_tab:cur_tab=='no_Lower'}">未上架的</li>
        </ul>
    </el-header>
    <el-main>
        <div class="search">
            <el-form :inline="true" class="demo-form-inline" size="small">
                <el-form-item label="商品名称" class="search_name">
                    <el-input v-model="goodsName" placeholder="输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="价格" class="search_price">
                    <el-input v-model="startPrice" placeholder="单行输入" class="search_price_start"></el-input> 到
                    <el-input v-model="endPrice" placeholder="单行输入" class="search_price_end"></el-input>
                </el-form-item>
                <el-form-item label="店铺分类">
                    <el-select clearable style="width: 200px" class="filter-item" v-model="cur_sel_shopSort" placeholder="选择分类">
                        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="toolbar">
            <el-button type="info" plain size="mini">删除</el-button>
            <el-button type="info" plain size="mini">上架</el-button>
            <el-button type="info" plain size="mini">下架</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'sales', order: 'descending'}" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.imgSrc" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称">
            </el-table-column>
            <el-table-column prop="goodsId" label="商品ID">
            </el-table-column>
            <el-table-column label="审核状态">
                <template slot-scope="scope">
                    <span :class="{checkFail:scope.row.checkStatus=='审核失败',checking:scope.row.checkStatus=='审核中'}">{{scope.row.checkStatus}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="goodsPrice" label="价格" sortable>
            </el-table-column>
            <el-table-column prop="goodsTotal" label="库存" sortable>
            </el-table-column>
            <el-table-column prop="sales" label="销量" sortable>
            </el-table-column>
            <el-table-column prop="goodsTime" label="上架时间" sortable>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <span class="oper pointer">编辑</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination layout="prev, pager, next" :total="50" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </el-main>
</div>
</template>

<style lang="scss" scoped>
#goods {
    height: 100%;
    & /deep/ {
        .el-header {
            height: 90px !important;
            width: 100%;
            line-height: 88px;
            border-bottom: 1px solid #ddd;
            padding-left: 28px;
            position: fixed;
            top: 0;
            z-index: 1;
            background: #fff;
            ul {
                list-style: none;
                li {
                    float: left;
                    margin-right: 50px;
                    cursor: pointer;
                    width: 65px;
                    text-align: center;
                }
                .cur_tab {
                    border-bottom: 1px solid #409eff;
                    color: #409eff;
                }
            }
        }
        .el-main {
            height: 100%;
            padding: 0;
            margin-top: 90px;
            .search {
                padding: 30px 0 30px 30px;
                .el-form-item {
                    margin-right: 35px;
                }
                &_name {
                    input {
                        width: 150px;
                    }
                }
                &_price {
                    display: flex;
                    .el-form-item__content {
                        display: flex;
                    }
                    input {
                        width: 100px;
                    }
                    &_start {
                        margin-right: 20px;
                    }
                    &_end {
                        margin-left: 20px;
                    }
                }
                form {
                    display: flex;
                    align-items: center;
                    input {
                        height: 32px !important;
                    }
                }
            }
            .toolbar {
                padding-left: 60px;
                button {
                    margin-right: 20px;
                }
            }
            .el-table {
                img {
                    width: 60px;
                    height: 60px;
                }
                .oper {
                    color: #409eff
                }
                .checking {
                    color: #7AD6B4
                }
                .checkFail {
                    color: red;
                }
            }
            .pagination {
                text-align: center;
                margin-top: 100px;
                li {
                    font-size: 20px;
                }
                .el-icon-arrow-left:before {
                    content: "\E606";
                    font-size: 20px;
                }
                .el-icon-arrow-right:before {
                    content: "\E606";
                    font-size: 20px;
                }
                .btn-next {
                    transform: rotate(180deg)
                }
            }
        }
    }
}
</style>

<script>
export default {
    data() {
        return {
            cur_tab: 'all', //all:全部,Sale:售卖中,check:审核中,Lower:售完下架,my_Lower :我下架的,no_Lower:未上架的
            goodsName: '',
            startPrice: '',
            endPrice: '',
            cur_sel_shopSort: '',
            importanceOptions: [1, 2, 3],

            tableData: [{
                imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532141842&di=a877e657848c0b7c44f33c8d6c915939&imgtype=jpg&er=1&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Fa1%2F14%2Fd%2F91.jpg',
                goodsName: '豆干',
                goodsId: '1',
                checkStatus: '审核中',
                goodsPrice: '93.0',
                goodsTotal: '3244',
                sales: '48239',
                goodsTime: '2018-07-12'
            }, {
                imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1531537263&di=646852f0423c4f95164b1565f79784cb&src=http://pic11.photophoto.cn/20090529/0034034544305310_b.jpg',
                goodsName: '辣条',
                goodsId: '2',
                checkStatus: '审核失败',
                goodsPrice: '913.0',
                goodsTotal: '4352',
                sales: '7768',
                goodsTime: '2017-07-12'
            }]
        }
    },
    methods: {
        formatter(row, column) {
            return row.address;
        },
        handleSelectionChange(val) {
            console.log(val)
        },

        handleCurrentChange(current_page) {
        }
    }
}
</script>
